<template>
  <div class="sw-divider-box" :style="{ marginBottom }">
    <div class="title" :style="{ color: color, fontSize: size }">{{ title }}</div>
    <div class="line"></div>
    <slot name="rightOpt"></slot>
  </div>
</template>
<script setup lang="ts">
  import { withDefaults, toRefs } from 'vue'

  const props = withDefaults(defineProps<{
    title?: string,
    color?: string,
    size?: string,
    marginBottom?: string
  }>(), {
    title: '',
    color: '#3E5182',
    size: '16px',
    marginBottom: ''
  })
  const { title, color, size, marginBottom } = toRefs(props)
</script>
<style lang="less" scoped>
.sw-divider-box {
  display: flex;
  align-items: center;
  .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    color:#3E5182;
  }
  .line {
    margin-left: 10px;
    flex: 1;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
